<template>
	<view class="ratios-container">
		<uni-card :border="false" margin="24rpx" shadow="none">
			<template v-slot:title>
				<uni-section title="基本信息" type="line"></uni-section>
			</template>

			<view class="content">
				<up-cell title="用户昵称" :value="sellerName"></up-cell>
				<up-cell title="登录账户" :value="loginName"></up-cell>
			</view>
		</uni-card>
		
		<uni-card :border="false" margin="24rpx" shadow="none">
			<view class="content">
				<up-text class="tip" prefixIcon="error-circle" text="注意：请按＂我的收益＂中的设置范围配置。"
					type="info" :size="13"></up-text>
			</view>
		</uni-card>

		<uni-card class="form-wrap" :border="false" margin="24rpx" shadow="none">
			<template v-slot:title>
				<uni-section class="tit-box flex" title="收益信息" type="line">
					<up-button @click="add" plain icon="plus" size="mini" type="primary" text="添加"></up-button>
				</uni-section>
			</template>

			<view class="content">
				<uni-forms label-width="170rpx" validate-trigger="blur" err-show-type="toast" ref="form"
					:model="formData">
					<view class="form-item-box" v-for="(item,index) in formData.profitRatioList" :key="index">
						<!-- <uni-forms-item label="渠道编码" required :rules="[{'required': true,errorMessage: '渠道编码必填'}]"
							:name="['profitRatioList',index,'channel']">
							<view class="form-item">
								<uni-easyinput v-model="formData.profitRatioList[index].channel" placeholder="请输入渠道编码" />
							</view>
						</uni-forms-item> -->

						<uni-forms-item label="支付名称" required :rules="[{'required': true,errorMessage: '支付名称必填'}]"
							:name="['profitRatioList',index,'paymentWay']">
							<view class="form-item">
								<uni-data-select placeholder="请选择支付名称"
									v-model="formData.profitRatioList[index].paymentWay"
									:localdata="paymentWayList"></uni-data-select>
							</view>
						</uni-forms-item>

						<uni-forms-item label="金额区间" required :rules="[{'required': true,errorMessage: '金额区间必选'}]"
							:name="['profitRatioList',index,'amountRange']">
							<view class="form-item">
								<uni-data-select placeholder="请选择金额区间"
									v-model="formData.profitRatioList[index].amountRange"
									:localdata="payAmountRangeList"></uni-data-select>
							</view>
						</uni-forms-item>
						
						<!-- <uni-forms-item label="最小金额" required :rules="[{'required': true,errorMessage: '最小金额必填'}]"
							:name="['profitRatioList',index,'minAmount']">
							<view class="form-item">
								<uni-easyinput v-model="formData.profitRatioList[index].minAmount" type="digit"
									maxlength="10" clearSize="18" trim="all" placeholder="请输入最小金额" />
							</view>
						</uni-forms-item> -->
						
						<!-- <uni-forms-item label="最大金额" required :rules="[{'required': true,errorMessage: '最大金额必填'}]"
							:name="['profitRatioList',index,'maxAmount']">
							<view class="form-item">
								<uni-easyinput v-model="formData.profitRatioList[index].maxAmount" type="digit"
									maxlength="10" clearSize="18" trim="all" placeholder="请输入最大金额" />
							</view>
						</uni-forms-item> -->
						
						<uni-forms-item label="收益率" required :rules="[{'required': true,errorMessage: '收益率必填'}]"
							:name="['profitRatioList',index,'earningRate']">
							<view class="form-item">
								<uni-easyinput v-model="formData.profitRatioList[index].earningRate" type="digit"
									maxlength="10" clearSize="18" trim="all" placeholder="请输入收益率" />
							</view>
						</uni-forms-item>

						<uni-forms-item label="状态" :name="['profitRatioList',index,'status']">
							<view class="form-item">
								<up-switch size="20" v-model="formData.profitRatioList[index].status"></up-switch>
							</view>
						</uni-forms-item>

						<view class="btn-action" v-if="formData.profitRatioList.length > 1">
							<up-button class="button" icon="minus" size="mini" type="error" plain
								@click="del(index)">删除</up-button>
						</view>
					</view>

				</uni-forms>
			</view>
		</uni-card>

		<view class="footer flex">
			<up-button type="primary" @click="submit('form')" shape="circle" text="提交"></up-button>
			<up-button text="返回" shape="circle" @click="onBack"></up-button>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		paymentWayList,
		getMyTeamMemberProfitRatios,
		setMyTeamMemberProfitRatios
	} from '@/api/seller/myTeam.js'

	const defaultData = {
		channel: '0',
		paymentWayName: '',
		paymentWay: '',
		status: '',
		earningRate: null
	}

	export default {
		data() {
			return {
				// 数据源
				sellerId: '',
				loginName:'',
				sellerName: '',
				payAmountRangeList: [],
				paymentWayList: [],
				formData: {
					profitRatioList: [_.clone(defaultData)]
				}
			}
		},
		computed: {
			args() {
				return {
					profitRatioList: this.formData.profitRatioList.map(v => ({
						...v,
						paymentWayName: _.find(this.paymentWayList, {
							value: v.paymentWay
						})?.name,
						status: v.status ? 0 : 1
					}))
				}
			}
		},
		methods: {
			// 新增表单域
			add() {
				this.formData.profitRatioList.push(_.clone(defaultData))
			},
			// 删除表单域
			del(index) {
				this.formData.profitRatioList.splice(index, 1)
			},
			onBack() {
				uni.navigateBack()
			},
			// 提交
			submit(ref) {
				const self = this
				this.$refs[ref].validate((err, value) => {
					if (!this.sellerId) {
						return false
					}
					
					if(!err){
						setMyTeamMemberProfitRatios(this.sellerId, this.args).then(({
							data
						}) => {
							// this.$modal.msgSuccess('设置成功')						
							uni.showModal({
							  title: '系统提示',
							  content: '收益率设置成功！',
							  cancelText: '退出',
							  showCancel:false,
							  confirmText: '知道了',
							  success: function (res) {
							    if (res.confirm) {
									self.$tab.navigateBack()
							    }
							  }
							})
						})
					}
				})
			},

			getPaymentWayList() {
				paymentWayList().then(res => {
					const data = res.data;
					this.paymentWayList = _.map(data.productList || [], vo => {
						return {
							...vo,
							value: vo.code,
							text: vo.name
						}
					});
				})
			},

			getList() {
				getMyTeamMemberProfitRatios(this.sellerId).then(({
					data
				}) => {
					this.loginName = data.sellerInfo.loginName || '';
					this.sellerName = data.sellerInfo.sellerName || '';
					this.payAmountRangeList = _.map(data.amountRangeList || [], vo => {
						return {
							...vo,
							value: vo.dictValue,
							text: vo.dictLabel
						}
					});
					const profitRatioList = data?.[0] || [];
					this.formData.profitRatioList = profitRatioList?.length > 0 ? profitRatioList.map(v => ({
						...v,
						status: v.status === 0
					})) : [_.clone(defaultData)];
				})
			}
		},
		onLoad(option) {
			// 获取传递的sellerId参数
			this.getPaymentWayList()
			if (option && option.id) {
				this.sellerId = option.id;
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ratios-container {
		/* #ifdef H5 */
		height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--window-top) - 130rpx);
		/* #endif */

		/* #ifndef H5 */
		height: calc(100vh - 130rpx);
		/* #endif */
		overflow: hidden;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		&::v-deep {
			.uni-section {
				border-bottom: 1px solid #efefef;

				.uni-section__content-title {
					font-size: 30rpx !important;
					color: #000 !important;
					font-weight: bold;
				}

				&.tit-box {
					width: 100% !important;
					justify-content: space-between;
				}

				.uni-section-content {
					text-align: right;
				}

				.u-icon {
					margin-right: 10rpx;
				}
			}

			.tit-box {
				align-items: center;
			}

			.uni-card {
				margin: 0 !important;
				margin-bottom: 24rpx !important;
				flex: none !important;

				&.form-wrap {
					flex: 1 !important;
					margin-bottom: 0rpx !important;
					display: flex;
					flex-direction: column;

					.uni-card__content {
						overflow-y: auto !important;
						flex: 1 !important;
						padding: 24rpx 0rpx !important;
					}
				}
			}

			.uni-card__content {
				padding: 24rpx !important;
			}

			.u-cell__body {
				padding: 14rpx;

				.u-cell__body__content {
					flex: none !important;

					.u-cell__title-text {
						font-size: 28rpx !important;
					}
				}

				.u-cell__value {
					flex: 1 !important;
					text-align: left;
					margin-left: 24rpx;
					background-color: #f2f2f2;
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
					font-size: 28rpx;
					color: #000;
				}
			}

			.u-line {
				display: none !important;
			}

			.form-item-box {
				background-color: rgba(#ecf5ff, 0.1);
				border: 1px solid rgba(#ecf5ff, 0.9);
				padding: 24rpx;
				margin-bottom: 24rpx;
				border-radius: 10rpx;

				&:last-child {
					margin-bottom: 0rpx;
				}
				
				.uniui-clear{
					font-size:36rpx !important;
				}

				.uni-forms-item {
					margin-bottom: 24rpx;
				}

				.uni-forms-item__label {
					justify-content: flex-end !important;
				}

				.uni-easyinput__content-input {
					height: 60rpx !important;
				}

				.form-item {
					height: 100%;
					display: flex;
					align-items: center;
				}
			}

			.btn-action {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				border-top: 1px solid #ecf5ff;
				padding: 24rpx;
				margin: 0 -24rpx -24rpx;
				background-color: rgba(#ecf5ff, 0.3);

				.u-button {
					height: 48rpx;
					padding: 0 !important;
					width: 130rpx;
					margin: 0;

					.u-icon {
						margin-right: 10rpx;
					}
				}
			}
		}

		.footer {
			position: fixed;
			width: 100%;
			box-sizing: border-box;
			padding: 24rpx;
			background-color: #fff;
			bottom: 0;
			left: 0;
			border-top: 1px solid #f2f2f2;

			button {
				&+button {
					margin-left: 24rpx;
				}
			}
		}
	}
</style>